<template>
    <div class="background">
      <div class="register-container">
        <h1>找回密码</h1>
        <el-form ref="forgotForm" :model="forgotForm" :rules="rules">
          <div class="child">
            <div class="char1">邮箱</div>
            <el-input
              class="input"
              v-model="forgotForm.email"
              ref="email"
              placeholder="请输入邮箱"
              autocomplete="off"
            ></el-input>
            <button class="button" :disabled="isSending" @click="sendVerificationCode">
              {{ buttonLabel }}
            </button>
          </div>
          <div class="child">
            <div class="char1">验证码</div>
            <el-input
              class="input"
              v-model="forgotForm.verificationCode"
              ref="verificationCode"
              placeholder="请输入验证码"
              autocomplete="off"
            ></el-input>
          </div>
          <div class="child">
            <div class="char2">新密码</div>
            <el-input
              class="input"
              type="password"
              v-model="forgotForm.newPassword"
              ref="newPassword"
              placeholder="请输入新密码"
              autocomplete="off"
            ></el-input>
          </div>
          <div class="child">
            <button class="button" @click="resetPassword">确认</button>
            <router-link to="/login">
              <button class="button">取消</button>
            </router-link>
          </div>
        </el-form>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    name: "ForgotPasswordView",
    data() {
      return {
        forgotForm: {
          email: "",
          verificationCode: "",
          newPassword: ""
        },
        rules: {
          email: [
            { required: true, message: "邮箱不能为空" },
            { type: 'email', message: "请输入有效的邮箱地址" }
          ],
          verificationCode: [{ required: true, message: "验证码不能为空" }],
          newPassword: [{ required: true, message: "新密码不能为空" }]
        },
        isSending: false,
        countdown: 0
      };
    },
    computed: {
      buttonLabel() {
        return this.isSending ? `${this.countdown}秒后重新发送` : "发送验证码";
      }
    },
    methods: {
      sendVerificationCode() {
        if (this.forgotForm.email.trim() === "") {
          this.$message.error("请输入邮箱");
          return;
        }
  
        axios.post('http://localhost:8095/user/sendVerificationCode', { email: this.forgotForm.email })
          .then((response) => {
            if (response.data.code === 200) {
              this.$message.success("验证码已发送到您的邮箱");
              this.startCountdown();
            } else {
              this.$message.error("发送验证码失败");
            }
          })
          .catch((error) => {
            console.error(error);
            this.$message.error("发送验证码失败");
          });
      },
      startCountdown() {
        this.isSending = true;
        this.countdown = 60;
        let timer = setInterval(() => {
          this.countdown--;
          if (this.countdown <= 0) {
            clearInterval(timer);
            this.isSending = false;
          }
        }, 1000);
      },
      resetPassword() {
        this.$refs.forgotForm.validate((valid) => {
          if (valid) {
            axios.post('http://localhost:8095/user/forgotPassword', this.forgotForm)
              .then((response) => {
                if (response.data.code === 200) {
                  alert("密码重置成功");
                  this.$router.push({ name: 'Login' });
                } else {
                  alert("密码重置失败，验证码无效或已过期");
                }
              })
              .catch((error) => {
                console.log(error);
              });
          }
        });
      }
    }
  };
  </script>
  
  <style scoped>
  .background {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgb(232, 232, 254);
    border: 2px solid rgb(206, 206, 207);
  }
  
  .register-container {
    width: 400px;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
  }
  
  .input {
    width: 100%;
    margin-top: 10px;
  }
  
  .button {
    height: 35px;
    margin: 10px;
    background-color: rgb(2, 167, 240);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .button:disabled {
    background-color: rgb(150, 150, 150);
    cursor: not-allowed;
  }
  
  .button:hover:enabled {
    background-color: rgb(1, 120, 180);
  }
  
  .wide-button {
    width: 150px; /* 调整按钮的宽度 */
  }
  
  .char1, .char2 {
    width: 80px;
    height: 32px;
    font-size: 20px;
    color: rgb(51, 51, 51);
    margin: 10px 0;
    text-align: left;
  }
  
  .child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 10px 0;
  }
  </style>
  